<template>
    <div>
        <!-- 对axios请求的数据进行派发 -->
      <detail-header ></detail-header>
      <detail-swiper :swiperList="swiperList"></detail-swiper>
      <detailMap ></detailMap>
      <!-- 让子路由 detailGalary显示到页面上 -->
      <router-view :addressList="addressList" :galaryList="galaryList" :imgList="imgList"></router-view>
    </div>
</template>

<script>
// 引入axios
import axios from 'axios'
import detailHeader from './components/detailHeader'
import detailSwiper from './components/detailSwiper'
import detailMap from './components/detailMap'
export default {
    name: 'Detail',
    components:{
        detailHeader,
        detailSwiper,
        detailMap
    },
    data(){
        return{
            swiperList: [],
            addressList: [],
            galaryList: [],
            imgList: []
        }
    },
    methods:{
      getDetailData(){
          axios.get("/api/detail.json?id="+this.$route.params.id).then(this.getDetailDataSucc)
        },
      //请求执行成功的函数   
      getDetailDataSucc(res){
          res=res.data
          if(res.data){
            const data=res.data   
            this.swiperList=data.swiperList
            this.addressList=data.addressList
            this.galaryList=data.galaryList
            this.imgList=data.imgList
          }
      }
    },
    mounted(){
        //当页面一加载就去触发请求数据的请求
        this.getDetailData()
    }
  

}
</script>

<style lang="stylus" scoped>

</style>

